<!--
* Created by Sean on 2017/11/8.
* Order Detail 订单详情
-->
<template>
    <div id="orderDetail" class="order-detail actWrap">
      <header class="header">
        <h3>订单状态</h3>
        <h1>等待确认</h1>
        <p>租客如逾期未支付，订单将自动取消</p>
      </header>
      <house-list v-if="orderInfo.housePersons" :houseInfo="orderInfo.housePersons"></house-list>
      <div class="renter-card">
        <div><img class="avatar" src="../../../images/avatar_default.png"/></div>
        <div class="renter-info">
          <p class="name">{{orderInfo.renter.trueName.replace(/([\u2E80-\u9FFF]{1})[\u2E80-\u9FFF]*([\u2E80-\u9FFF]{1})/, '$1**$2')}}</p>
          <p class="mobile">{{`${orderInfo.renter.mobile.substr(0,3)}****${orderInfo.renter.mobile.substr(-4)}`}}</p>
        </div>
      </div>
      <group>
        <x-input :show-clear="false"title="租金" v-model="rentMoney" text-align="right"></x-input>
        <cell title="押金" :value="((orderInfo.order && orderInfo.order.dMoney) || 0) + ' 元'"></cell>
        <!-- <cell title="免押金" inline-desc="腾讯信用免押金：4500.00元"></cell> -->
        <cell title="免押金" v-if="orderInfo && orderInfo.housePersons && orderInfo.housePersons.isFreebet" :inline-desc="'腾讯信用免押金：'+orderInfo.order.dMoney+' 元'"></cell>
        <cell title="物业费" :value="(orderInfo.order && orderInfo.order.strataFee || 0) + ' 元'"></cell>
        <!--<cell title="服务费" :value="orderInfo.housePersons && orderInfo.order.serviceCharge"></cell>-->
        <cell title="合计" :value="(orderInfo.order && orderInfo.order.totalMoneyValue || 0) + ' 元'"></cell>
      </group>
      <group v-for="(item, index) in orderInfo.contractPersons" :key="index">
        <cell title="入住人" :value="item.trueName"></cell>
        <cell title="手机号" :value="`${item.mobile.substr(0,3)}****${item.mobile.substr(-4)}`"></cell>
        <cell title="身份证号" :value="`${item.idCard.substr(0,6)}***********${item.idCard.substr(-4)}`"></cell>
      </group>
      <group>
        <cell title="订单号" :value="orderInfo.order && orderInfo.order.orderCode"></cell>
        <cell title="下单时间" :value="orderInfo.order && orderInfo.order.createTime"></cell>
      </group>
      <div class="btn-wrapper">
        <x-button class="btn-refuse" type="plain" @click.native="showConfirm = true">拒绝签约</x-button>
        <x-button type="primary" @click.native="agreeBtn">同意签约</x-button>
      </div>
      <div v-transfer-dom >
        <section v-show="showDialog" class="tips-dialog contract__dialog v_show_contract" hide-on-blur>
          <div class="bodySub">
            <!-- <p>1、电子合同一经双方电子签名即生效，请详细阅读合同条款再进行签约；</p>
            <p>2、请确认签约主体、租期、租金、付款方式、押金方案、纠纷处理途径等自由约定条款；</p>
            <p>3、租赁合同文本为平台签约标准合同文本，通过平台签约的用户有其他约定的，可以在附页中补充协议，但内容不得与正文及法律法规相违背，补充协议与正文同等效力；</p>
            <p>4、本合同由第三方CA认证机构提供公证服务，具备真实有效，签订一份合同需支付 ¥2.75 元服务费用，如有补充协议合同费用累加；</p> -->
            <contract :contractDetail="orderInfo"/>
            <x-button type="primary" @click.native="signContract">同意签约</x-button>
          </div>
          <div class="btn-close" @click="showDialog = false"></div>
        </section>
      </div>
      <div v-transfer-dom>
        <div class="title-box">
        <confirm v-model="showConfirm" class="confirm-refuse" @on-confirm="refuseOrder" @on-cancel="showConfirm = false">
          <p>您确定拒绝与该租客签约吗？</p>
          
        </confirm>
        </div>
      </div>
    </div>
</template>
<script>
  import {Group, Card, Cell, Confirm, TransferDomDirective as TransferDom} from 'vux'
  import houseList from '@/components/houseList'
  import contract from '@/components/contract'
  export default {
    name: 'OrderDetail',
    directives: {
      TransferDom
    },
    components: {
      houseList,
      contract,
      Group,
      Card,
      Cell,
      Confirm
    },
    data () {
      return {
        orderId: '',
        orderInfo: {
          housePersons: {},
          landlord: {},
          order: {},
          render: {},
          apartment: {},
          romm: {},
          renter: {
            mobile: '',
            trueName: ''
          }
        },
        rentMoney: 0, // 租金
        rentalPrice: 0, // 房源发布金额
        showDialog: false, // 签约提示框
        showConfirm: false, // 拒绝确认框
        houseType: 1 // 1个人房源，2品牌公寓
      }
    },
    created () {
      this.orderId = this.$route.params.orderId
      this.getData()
    },
    methods: {
      getData () {
        this.$axiosPosting(this.$api.queryOrderDetail4Renter, {
          orderId: this.orderId
        }).then(json => {
          if (json.code === '0000') {
            if (!json.data.renter) {
              json.data['renter'] = {
                mobile: '***********',
                trueName: ''
              }
            }
            // 处理公寓房源数据
            let orderData = json.data
            if (orderData.apartment) {
              let apartment = orderData.apartment
              let room = orderData.romm
              if (orderData.apartment) {

              }
              let housePerson = {
                id: apartment.id,
                coverImg: apartment.cover,
                houseTitle: room.buildingName + room.roomName,
                address: apartment.address,
                createTime: apartment.createTime,
                rentalPrice: apartment.rentMoney
              }
              orderData['housePersons'] = housePerson
              this.houseType = 2
            }
            this.orderInfo = orderData
            if (!this.orderInfo.apartment) this.orderInfo.apartment = {}
            if (!this.orderInfo.romm) this.orderInfo.romm = {}
            if (!this.orderInfo.renter) this.orderInfo.renter = {}
            if (!this.orderInfo.render) this.orderInfo.render = {}
            if (!this.orderInfo.housePersons) this.orderInfo.housePersons = {}
            this.rentMoney = this.orderInfo && this.orderInfo.order.money
            this.rentalPrice = this.orderInfo && this.orderInfo.housePersons.rentalPrice
            this.orderInfo.houseType = this.orderInfo.order.houseType
          }
        })
      },
      // 同意
      agreeBtn () {
        // 租金校验
        if (+this.rentMoney === 0) {
          this.$vux.toast.text('租金不能为空')
          return false
        }
        if ((+this.rentMoney).toString() === 'NaN') {
          this.$vux.toast.text('请输入正确的金额')
          return false
        }
        if (+this.rentMoney > this.rentalPrice) {
          // this.$vux.toast.text('租金不能大于发布金额')
          // return false
        }
        this.showDialog = true
      },
      // 签约
      signContract () {
        this.showDialog = false
        let signContractApi = this.houseType === 1 ? this.$api.createContract : this.$api.createContract4Apartment
        this.$axiosPosting(signContractApi, {
          orderId: this.orderId,
          money: this.rentMoney
        }).then(json => {
          if (json.code === '0000') {
            this.$router.push({path: '/landlord/order'})
          }
        })
      },
      // 拒绝签约
      refuseOrder () {
        this.showConfirm = false
        this.$axiosPosting(this.$api.cancelOrder, {
          orderId: this.orderId
        }).then(json => {
          if (json.code === '0000') {
            this.$vux.toast.text('拒绝签约成功', 'middle')
            this.$router.go(-1)
          }
        })
      },
      // 联系房东
      contactLandlor (userId) {
        let virtualNum = ''
        let mobileTo = ''
        this.$axiosPosting(this.$api.getUserById, {userId}).then(res => {
          if (res.code === '0000') {
            mobileTo = res.data.mobile
            step2()
          }
        })
        const step2 = () => {
          let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
          let mobileFor = userInfo ? userInfo.mobile : ''
          if (mobileFor) {
            if (virtualNum === '') {
              this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
                let data = ''
                if (res.code === '0000') {
                  data = JSON.parse(res.data)
                }
                if (res.code === '0000' && data.errorCode === '0') {
                  virtualNum = data.virtualNum
                  window.location.href = `tel:${virtualNum}`
                } else {
                  this.$vux.toast.text('无法获取房东电话')
                  virtualNum = ''
                }
              })
            } else {
              window.location.href = `tel:${virtualNum}`
            }
          } else {
            this.$router.replace('/login')
          }
        }
      }
    }
  }
</script>
<style lang="less">
.contract__dialog {
  .weui-dialog {
    width: 98vw !important;
  }
}
  .order-detail {
    background: #f4f4f4;
    padding-bottom: 50px;
    .header {
      height: 150px;
      padding-top: 1rem;
      padding-bottom: 40px;
      background:  #ff9600;
      line-height: 1;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      h1 {
        margin: 8px auto 28px;
        font-size: 22px;
      }
      h3, p {
        font-size: 14px;
      }
      h3 {
        // color: #bad7ff;
        color: white;
      }
    }
    .renter-card {
      display: flex;
      margin-top: 6px;
      padding: 15px;
      height: 55px;
      background: #fff;
      .avatar {
        width: 55px;
        height: 55px;
        border-radius: 50%;
      }
      .renter-info {
        flex-grow: 1;
        p {
          padding-left: 10px;
          font-size: 15px;
          line-height: 28px;
        }
        .mobile {
          color: #777;
        }
      }
      .icon-wrap {
        display: flex;
        align-items: center;
        img {
          width: 38px;
          height: 38px;
          vertical-align: top;
        }
      }
    }
    .weui-cells {
      margin-top: 6px;
      .weui-cell {
        .vux-label,
        .weui-cell__ft {
          font-size: 15px;
        }
        .weui-cell__ft {
          color: #777;
        }
        .vux-label-desc {
          font-size: 12px;
          color: #4e4e4e;
        }
      }
    }
    .btn-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: flex;
      .weui-btn {
        margin-top: 0;
        border-radius: 0;
      }
      .btn-refuse {
        color: #ff9600;
        background: #fff;
        &:after {
          background: transparent;
        }
      }
    }
    .vux-x-input:after {
      content: ' 元';
      position: relative;
      display: inline-block;
      margin-left: 4px;
      font-size: 15px;
      line-height: .8;
      color: #777;
    }
  }
  .tips-dialog {
    .headerSub {
      padding: 30px 0 20px;
      font-size: 24px;
      line-height: 1;
      color: #000;
      text-align: center;
    }
    .bodySub {
      padding: 0 15px 15px;
      p {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.6;
        color: #777;
        text-align: left;
      }
      .weui-btn {
        margin-top: 20px;
      }
    }
  }
  .confirm-refuse {
    .weui-dialog__bd {
      font-size: 17px;
      color: #000;
    }
    .weui-dialog__btn_default {
      color:  #ff9600;
      background: #fff !important;
      border-top: 1px solid #f4f4f4;
    }
  }
  .tips-dialog, .confirm-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .btn-close {
      position: absolute;
      left: 50%;
      bottom: -60px;
      width: 36px;
      height: 36px;
      margin-left: -18px;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .tips-dialog .weui-dialog, .confirm-refuse .weui-dialog{
    height: 100%;
    overflow: scroll;
    max-width: 100%;
}
.title-box  .tips-dialog .weui-dialog, .confirm-refuse .weui-dialog{
    height: auto;
    overflow: scroll;
    max-width: 100%;
}
.v_show_contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  min-height: 100vh;
  height: auto !important;
  overflow-y: auto !important;
  background: white;
}
</style>
